<template>
  <!--联系方式管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="show1">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
    </div>
    <!--公用-->
    <div v-show="show">
      <div class="add_style">
        <span>地址:</span>
        <Input v-model="formItem.addr" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>邮箱:</span>
        <Input v-model="formItem.mail" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>联系方式:</span>
        <Input v-model="formItem.phone" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>联系人:</span>
        <Input v-model="formItem.linkman" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>图片:</span>
        <div>
          <upload :echo="echo" @returnValue="returnValue1"></upload>
        </div>
      </div>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="handleSubmit">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="handleSubmit1">保存</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>

    <Modal v-model="modal2" width="360">
      <div style="text-align:center">
        <p>删除不可恢复，是否确定删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="notarizeRemove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import upload from '../module/upload.vue';
  export default {
    components: {
      upload
    },
    data() {
      return {
        /*查询url*/
        inquireurl: this.$api.url + '/contactmethod/selectContactMethod/',
        /*公用*/
        show: false,
        /*添加按钮*/
        table: true,
        addBtn: false,
        /*返回按钮*/
        table2: false,
        /*编辑按钮*/
        compileBtn: false,
        /*预览*/
        preview: false,
        /*上传图片*/
        file:'',
        echo:'',
        /*表单*/
        formItem: {
          createUser: 1,
          addr: '',
          mail: '',
          phone: '',
          linkman: '',
          id: '',
        },
        /*表格*/
        columns: [
          {
            title: '地址',
            key: 'addr',
          },
          {
            title: '邮箱',
            key: 'mail',
            align: 'center',
            width: 180,
          },
          {
            title: '联系人',
            key: 'linkman',
            align: 'center',
            width: 150,
          },
          {
            title: '联系方式',
            key: 'phone',
            align: 'center',
            width: 200,
          },
          {
            title: '操作',
            key: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show2(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        data: [],
        modal2: false,
        index:'',
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.get(this.inquireurl)
    },
    methods: {
      /*分页*/
      returnValue(data) {
        this.cur = data;
        this.get(this.inquireurl, this.cur)
      },
      /*添加*/
      show1() {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.addBtn = true;
      },
      /*编辑*/
      show2(index) {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.compileBtn = true;
        this.echo = this.data[index].uri;
        this.formItem.addr = this.data[index].addr;
        this.formItem.mail = this.data[index].mail;
        this.formItem.phone = this.data[index].phone;
        this.formItem.id = this.data[index].id;
        this.formItem.linkman = this.data[index].linkman;
      },
      /*删除*/
      remove(index) {
        this.modal2 = true;
        this.index = this.data[index]
      },
      notarizeRemove(){
        this.$axios.get(this.$api.url + "/contactmethod/delectCMC/" + this.index.id).then((res) => {
          this.$Message.success(`删除成功!`);
          this.modal2 = false;
          this.get(this.inquireurl)
        });
      },
      /*返回*/
      back() {
        this.table = true;
        this.table2 = false;
        this.addBtn = false;
        this.show = false;
        this.compileBtn = false;
        this.formItem = {
          title: '',
          deployModule: '',
          newsIntro: '',
          img: '',
          newsContent: '',
          createUser: 1,
        };
        this.msg = '';
        this.get(this.inquireurl, this.cur)
      },
      /*保存*/
      handleSubmit() {
        this.post(this.$api.url + '/contactmethod/insertC')
      },
      handleSubmit1(){
        this.post(this.$api.url + '/contactmethod/updateContactMethod')
      },
      /*图片*/
      returnValue1(data) {
        this.echo = '';
        this.file = data;
      },
      /*post请求*/
      post(url) {
        let _this = this;
        let formData = new FormData();
        formData.append("file", this.file);
        formData.append("contactMethod", JSON.stringify(this.formItem));
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };
        this.$axios.post(url, formData,config).then(function (res) {
          _this.$router.go(0)
        })
      },
      /*get请求*/
      get(url, cur) {
        this.$axios.get(url).then((res) => {
          this.data = res.data;
        });
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 70px;
  }
</style>

